<template>
    <router-link to="/" :class="['logo-wrapper flex-row', theme]">
        <!-- <svg-icon icon="logo" class="verticalMiddle" :size="30" /> -->
        <img :src="theme == 'blue' ? logo : logoWhite" class="logo" />
        <!-- <div class="logo-title verticalMiddle">{{tenantInfo.companyName?tenantInfo.companyName:'顺畅养护'}}</div> -->
    </router-link>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'logo',
    data() {
        return {
            logo: require('@/assets/logo.png'),
            logoWhite: require('@/assets/logo_white.png')
        };
    },
    computed: {
        ...mapState({
            tenantInfo: state => state.user.tenantInfo,
            theme: state => state.setting.theme
        })
    }
};
</script>
<style lang="scss" scoped>
.logo-wrapper {
    &.blue {
        background: -webkit-linear-gradient(to right, #e0e0e0, #efefef) !important;
        background: -o-linear-gradient(to right, #e0e0e0, #efefef) !important;
        background: -moz-linear-gradient (to right, #e0e0e0, #efefef) !important;
        background: linear-gradient(to right, #e0e0e0, #efefef) !important;
    }
    &.dark {
        background: #24303C;
    }
    &.light {
        background: #4C8EDD;
    }
    .logo {
        height: 22px;
    }
}
</style>
